<template>
  <div class="page-content user">
    <div class="content">
      <div class="left-wrap">
        <div class="user-wrap box-style">
          <img class="bg" src="@/assets/img/user/bg.webp" />
          <!-- 微信头像 -->
          <img class="avatarPic" :src="form.avatar" />
          <!-- 微信昵称 -->
          <h2 class="name"> {{ form.nickName }} </h2>
          <p class="des">ID:{{ form.memberId }}</p>
          <div class="lables">
            <span>标签：</span>
            <div v-if="tagsList.length">
              <div v-for="item in tagsList" :key="item">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="lables">
            <span>分组：</span>
            <div class="font12">
              {{ form.memberGroupName }}
            </div>
          </div>
          <div class="outer-info">
            <div>
              <i class="iconfont-sys">&#xe608;</i>
              <span>关联手机号：{{ form.wxBindingMobile }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>来源渠道：{{ form.source === 'WECHAT' ? '微信小程序' : form.source === 'APP' ? '应用' : form.source
                ===
                'WEB' ? '后台添加' : '' }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>所学车型：{{ form.studyCarModelName }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>注册时间：{{ form.registerTime }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>最后访问时间：{{ form.lastActiveTime }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>微信OpenId：{{ form.openid }}</span>
            </div>
          </div>
          <div class="vipInfo">会员VIP信息</div>
          <div class="outer-info">
            <div>
              <i class="iconfont-sys">&#xe608;</i>
              <span>会员VIP状态：{{ form.isVip === 0 ? '到期' : form.isVip === 1 ? '已开通' : '未开通' }}</span>
            </div>
            <!-- <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>开通时间：{{ form.vipStartTime }}</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>到期时间：{{ form.vipEndTime }}</span>
            </div> -->
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>VIP权益：
                <div v-for="(item, index) in form.vipMemberList" :index>
                  {{ item.name }}
                  <span style="margin-left: 10px;">
                    到期：{{ item.endTime }}
                  </span>
                </div>
              </span>
            </div>
          </div>
          <div class="vipInfo">分销员信息</div>
          <div class="outer-info">
            <div>
              <i class="iconfont-sys">&#xe608;</i>
              <span>分销员等级：</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>邀请人：</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe736;</i>
              <span>加入时间：</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>推广客户数：</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>已结算收益：</span>
            </div>
            <div>
              <i class="iconfont-sys">&#xe811;</i>
              <span>待结算收益：</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="info box-style">
          <h1 class="title">学员档案</h1>

          <el-form :model="form" class="form" ref="ruleFormRef" :rules="rules" label-width="86px" label-position="top">
            <el-row>
              <el-form-item label="学员姓名" prop="realName">
                <el-input v-model="form.realName" :disabled="!isEdit" />
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber" class="right-input">
                <el-input v-model="form.idNumber" :disabled="!isEdit" />
              </el-form-item>
              <el-form-item label="手机号" prop="mobile" class="right-input">
                <el-input v-model="form.mobile" :disabled="!isEdit" />
              </el-form-item>
              <el-form-item label="性别" prop="gender" class="right-input">
                <el-select v-model="form.gender" placeholder="请选择性别" :disabled="!isEdit">
                  <el-option v-for="item in options_sex" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="家庭地址" prop="location" class="left-input">
                <el-input v-model="form.location" :disabled="!isEdit"></el-input>
              </el-form-item>
              <el-form-item label="身份证照片" prop="name" class="right-input">
                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-input v-model="form.cardFrontImg" style="display: none"></el-input>
                    <div class="avatar-uploader" @click="openImageDialog('cardFrontImg')">
                      <el-image v-if="cardFrontImg" :src="cardFrontImg" class="avatar" fit="contain"></el-image>
                      <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                          <Plus />
                        </el-icon></i>
                      <div v-if="cardFrontImg" class="mask">替换</div>
                      <el-icon v-if="cardFrontImg" class="del-image" :size="20"
                        @click.stop="handleDelImg('cardFrontImg')">
                        <CircleCloseFilled />
                      </el-icon>
                    </div>
                    <div style="text-align: center">身份证正面</div>
                  </el-col>
                  <el-col :span="12">
                    <el-input v-model="form.cardBackImg" style="display: none"></el-input>
                    <div class="avatar-uploader" @click="openImageDialog('cardBackImg')">
                      <el-image v-if="cardBackImg" :src="cardBackImg" class="avatar" fit="contain"></el-image>
                      <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                          <Plus />
                        </el-icon></i>
                      <div v-if="cardBackImg" class="mask">替换</div>
                      <el-icon v-if="cardBackImg" class="del-image" :size="20"
                        @click.stop="handleDelImg('cardBackImg')">
                        <CircleCloseFilled />
                      </el-icon>
                    </div>
                    <div style="text-align: center">身份证反面</div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <h1 class="tips">报名信息</h1>
            <el-row>
              <el-form-item label="报名时间" prop="applyTime">
                <el-date-picker v-model="form.applyTime" type="date" placeholder="" style="width: 100%"
                  :disabled="!isEdit" />
              </el-form-item>
              <el-form-item label="招生人" prop="recruitingSpecialistId" class="right-input">
                <el-select v-model="form.recruitingSpecialistId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in enrollList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="报名点" prop="registrationSiteId" class="right-input">
                <el-select v-model="form.registrationSiteId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in signList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="教练员" prop="coachId" class="right-input">
                <el-select v-model="form.coachId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in coachList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="报考车型" prop="carModelId">
                <el-select v-model="form.carModelId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in cardsList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="报名班型" prop="storePackageId" class="right-input">
                <el-select v-model="form.storePackageId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in classList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="缴费方式" prop="payType" class="right-input">
                <el-select v-model="form.payType" placeholder="" :disabled="!isEdit">
                  <el-option label="微信" value="2" />
                  <el-option label="支付宝" value="1" />
                  <el-option label="现金" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="实付金额" prop="realPaySum" class="right-input">
                <el-input v-model="form.realPaySum" :disabled="!isEdit">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
            </el-row>
            <h1 class="tips">考试状态</h1>
            <el-row>
              <el-form-item label="当前考试科目" prop="nowExam">
                <el-select v-model="form.nowExam" placeholder="" :disabled="!isEdit">
                  <el-option label="科目一" value="1" />
                  <el-option label="科目二" value="2" />
                  <el-option label="科目三" value="3" />
                  <el-option label="科目四" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="报名状态" prop="applyState" class="right-input">
                <el-select v-model="form.applyState" placeholder="" :disabled="!isEdit">
                  <el-option label="未报名" value="0" />
                  <el-option label="已报名" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="考试时间" prop="nowExamTime" class="right-input">
                <el-date-picker v-model="form.nowExamTime" type="date" placeholder="" style="width: 100%"
                  :disabled="!isEdit" />
              </el-form-item>
              <el-form-item label="已通过科目" prop="noExam" class="right-input">
                <el-select v-model="form.noExam" placeholder="" multiple :disabled="!isEdit">
                  <el-option label="科目一" value="1" />
                  <el-option label="科目二" value="2" />
                  <el-option label="科目三" value="3" />
                  <el-option label="科目四" value="4" />
                </el-select>
              </el-form-item>
            </el-row>
            <h1 class="tips">用户标签</h1>
            <el-row>
              <el-form-item label="用户标签" prop="tags">
                <el-select v-model="form.tags" placeholder="请选择用户标签" multiple :disabled="!isEdit">
                  <el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.label" />
                </el-select>
              </el-form-item>
              <el-form-item label="用户分组" prop="memberGroupId" class="right-input">
                <el-select v-model="form.memberGroupId" placeholder="" :disabled="!isEdit">
                  <el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="用户状态" prop="state" class="right-input">
                <el-switch v-model="form.state" :inactive-value="0" :active-value="1" :disabled="!isEdit"
                  class="custom-switch" />
              </el-form-item>
            </el-row>
            <el-form-item label="用户备注" prop="remark" :style="{ height: '130px' }">
              <el-input type="textarea" :rows="4" v-model="form.remark" :disabled="!isEdit" />
            </el-form-item>
            <div class="el-form-item-right">
              <el-button type="primary" style="width: 90px" v-ripple @click="edit" :loading="loading">
                {{ isEdit ? '保存' : '编辑资料' }}
              </el-button>
              <el-button color="#409eff" style="width: 90px" @click="dialogVisible = true">
                修改密码
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="更改密码" width="25%" :close-on-click-modal="false">
      <el-form ref="formRef" :model="pwdForm" :rules="rules" label-width="120px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="pwdForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="pwdForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="passwordloading" @click="handleSubmit()">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
      :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
      :operationType="false"></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router';
import { userDetails, enrollStudents, SignUpList, cardsType, classType, userGroup, labelGroup, resetPassword, EditUsers, coachData } from '@/api/userStudentsApi'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

const userStore = useUserStore()
let server = `${import.meta.env.VITE_API_URL}files`
let { accessToken } = userStore
const headers = { Authorization: 'Bearer ' + accessToken }

const userInfo = computed(() => userStore.getUserInfo)

const dialogVisible = ref(false)
const isEdit = ref(false)
const isEditPwd = ref(false)
const date = ref('')
const route = useRoute();

const form = ref<RuleForm>({
  nickName: '',
  realName: '',
  idNumber: '',
  mobile: '',
  gender: '1',
  location: '',
  cardBackImg: '',
  cardFrontImg: '',
  applyTime: '',
  recruitingSpecialistId: '',
  registrationSiteId: '',
  carModelId: '',
  storePackageId: '',
  payType: '',
  realPaySum: '',
  nowExam: '',
  applyState: '',
  nowExamTime: '',
  noExam: [],
  tags: [],
  memberGroupId: '',
  state: '1',
  remark: '',
  avatar: '', //左侧详情信息
  memberGroupName: '',
  wxBindingMobile: '',
  source: '',
  carModelName: '',
  registerTime: '',
  lastActiveTime: '',
  openid: '',
  isVip: 0,
  vipStartTime: '',
  vipEndTime: '',
  clubCardName: '',
  memberId: '',
  id: '',
  studyCarModelName: '',
  coachId: '',
  clubCardNames: '',
  vipEndTimes: '',
  vipMemberList: []
})
interface RuleForm {
  nickName: string
  realName: string
  idNumber: string
  mobile: string
  gender: string
  location: string
  cardBackImg: string
  cardFrontImg: string
  applyTime: string
  recruitingSpecialistId: string
  registrationSiteId: string
  carModelId: string
  storePackageId: string
  payType: string
  realPaySum: string
  nowExam: string
  applyState: string
  nowExamTime: string
  noExam: string | string[] | undefined
  tags: any
  memberGroupId: string
  state: string
  remark: string
  avatar: string  //左侧详情信息
  memberGroupName: string
  wxBindingMobile: string
  source: string
  carModelName: string
  registerTime: string
  lastActiveTime: string
  openid: string
  isVip: number
  vipStartTime: string
  vipEndTime: string
  clubCardName: string
  memberId: string
  id: string
  studyCarModelName: string
  coachId: string
  clubCardNames: string
  vipEndTimes: string,
  vipMemberList: any
}

interface PwdForm {
  newPassword: string;
  confirmPassword: string;
}

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) {
    if (currentImageType.value === 'cardFrontImg') {
      cardFrontImg.value = value.fileUrl
    } else {
      cardBackImg.value = value.fileUrl
    }
  }
  showImageChooseDialog.value = false
}

const currentImageType = ref('cardFrontImg')
const openImageDialog = (type: string) => {
  currentImageType.value = type
  showImageChooseDialog.value = true
}

const handleDelImg = (e: string) => {
  if (e === 'cardFrontImg') {
    cardFrontImg.value = ''
  } else {
    cardBackImg.value = ''
  }
}


const pwdForm = reactive<PwdForm>({
  newPassword: '',
  confirmPassword: ''
})
// 重复密码的验证
const validatePasswordMatch = (rule: any, value: string, callback: any) => {
  if (value !== pwdForm.newPassword) {
    throw new Error('两次密码不一致！');
  } else {
    callback()
  }
};


const loading = ref(false)
const passwordloading = ref(false)
const formRef = ref<FormInstance>()
const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate(async (valid) => {
      if (valid) {
        try {
          passwordloading.value = true
          const { code, data, msg } = await resetPassword(Number(form.value.memberId), pwdForm.newPassword)
          if (code === '00000') {
            ElMessage.success('密码修改成功')
          } else {
            ElMessage.error(msg)
          }
          dialogVisible.value = false
        } catch (e) {
        } finally {
        }
      }
    })
  } catch (error) {
    console.log('验证失败', error)
  }
}

const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  realName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
  ],
  idNumber: [
    {
      required: true,
      message: '请输入身份证号',
      trigger: 'blur'
    },
    { min: 18, max: 18, pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, message: '请输入正确的身份证号格式', trigger: 'blur' }
  ],
  nikeName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
  ],
  email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
  { min: 11, max: 11, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],

  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePasswordMatch, trigger: 'blur' }
  ]
})
//用户性别
const options_sex = [
  {
    value: '1',
    label: '男'
  },
  {
    value: '2',
    label: '女'
  }
]
//用户来源
const options_source = [
  {
    value: '1',
    label: '微信小程序'
  },
  {
    value: '2',
    label: '安卓'
  },
  {
    value: '3',
    label: 'IOS'
  }
]
//是否vip
const options_isvip = [
  {
    value: '1',
    label: '是'
  },
  {
    value: '2',
    label: '否'
  }
]

const getDate = () => {
  const d = new Date()
  const h = d.getHours()
  let text = ''

  if (h >= 6 && h < 9) {
    text = '早上好'
  } else if (h >= 9 && h < 11) {
    text = '上午好'
  } else if (h >= 11 && h < 13) {
    text = '中午好'
  } else if (h >= 13 && h < 18) {
    text = '下午好'
  } else if (h >= 18 && h < 24) {
    text = '晚上好'
  } else if (h >= 0 && h < 6) {
    text = '很晚了，早点睡'
  }

  date.value = text
}

const filterEmptyValues = (obj: any) => {
  const result: any = {}
  for (const key in obj) {
    if (obj[key] !== '' && obj[key] !== undefined && obj[key] !== null) {
      result[key] = obj[key]
    }
  }
  return result
}

const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}

const edit = async () => {
  isEdit.value = !isEdit.value
  if (!isEdit.value) {
    console.log(111);
    try {
      loading.value = true
      let submitData = {
        realName: form.value.realName,
        idNumber: form.value.idNumber,
        gender: form.value.gender,
        mobile: form.value.mobile,
        location: form.value.location,
        applyTime: form.value.applyTime ? formatDate(form.value.applyTime) : '',
        registrationSiteId: form.value.registrationSiteId,
        recruitingSpecialistId: form.value.recruitingSpecialistId,
        nowExam: form.value.nowExam,
        realPaySum: form.value.realPaySum,
        carModelId: form.value.carModelId,
        noExam: Array.isArray(form.value.noExam) ? form.value.noExam.join(',') : form.value.noExam,
        remark: form.value.remark,
        payType: form.value.payType,
        memberGroupId: form.value.memberGroupId,
        storePackageId: form.value.storePackageId,
        cardFrontImg: cardFrontImg.value,
        cardBackImg: cardBackImg.value,
        id: form.value.id,
        nowExamTime: form.value.nowExamTime ? formatDate(form.value.nowExamTime) : '',
        applyState: form.value.applyState,
        memberId: form.value.memberId,
        state: form.value.state,
        tags: Array.isArray(form.value.tags) ? form.value.tags.join(',') : form.value.tags,
        coachId: form.value.coachId
      }
      console.log(form.value.state, "form.value.state===");
      const res = await EditUsers({
        ...filterEmptyValues(submitData),
        cardFrontImg: cardFrontImg.value,
        cardBackImg: cardBackImg.value
      })
      if (res.code === '00000') {
        isEdit.value = false
        ElMessage.success('编辑成功')
        getUserInfo()
      }
    } catch (error) {
      loading.value = true
    } finally {
      loading.value = false
    }
  } else {
    console.log(222);

  }
}

const editPwd = () => {
  isEditPwd.value = !isEditPwd.value
}
const deleteUser = () => {
  ElMessageBox.confirm('确定要注销该用户吗？', '注销用户', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(async () => {
    // const res = await DelStaffList(id)
    // if (res.code === '00000') {
    //   ElMessage.success('注销成功')
    //   getData();
    // }
  })
}

const tagsList = ref<string[]>([])
async function getUserInfo() {
  try {
    const { code, data } = await userDetails(Number(route.query.id))
    if (code === '00000' && data) {
      form.value = data
      form.value.gender = (form.value.gender === null || form.value.gender === undefined || String(form.value.gender) === '0')
        ? ''
        : String(form.value.gender)
      form.value.payType = (form.value.payType === null || form.value.payType === undefined || String(form.value.payType) === 'null')
        ? ''
        : String(form.value.payType)
      form.value.applyState = (form.value.applyState === null || form.value.applyState === undefined || String(form.value.applyState) === 'null')
        ? ''
        : String(form.value.applyState)
      form.value.nowExam = (form.value.nowExam === null || form.value.nowExam === undefined || String(form.value.nowExam) === 'null')
        ? ''
        : String(form.value.nowExam)
      // 已通过科目：空字符串或空值处理为 []，字符串正常分割
      form.value.noExam =
        typeof form.value.noExam === 'string'
          ? (form.value.noExam.trim() ? form.value.noExam.split(',') : [])
          : Array.isArray(form.value.noExam)
            ? form.value.noExam
            : []
      cardFrontImg.value = form.value.cardFrontImg
      cardBackImg.value = form.value.cardBackImg
      form.value.state = form.value.state
      tagsList.value = form.value.tags ? form.value.tags.split(',') : []
      form.value.tags = form.value.tags ? form.value.tags.split(',') : []
      // 将 clubCardNames 和 vipEndTimes 拼接为对象数组形式
      const clubCardNamesArr = form.value.clubCardNames ? form.value.clubCardNames.split(',') : [];
      const vipEndTimesArr = form.value.vipEndTimes ? form.value.vipEndTimes.split(',') : [];
      form.value.vipMemberList = clubCardNamesArr.map((name: string, idx: number) => ({
        name,
        endTime: vipEndTimesArr[idx] || ''
      }));
      console.log(form.value.vipMemberList, "form.value.vipMemberList=====");
    }
  } catch (e) {
  } finally {
  }
}
interface Option {
  label: string;
  value: string | number; // 根据实际值调整
}

const signList = ref<Option[]>([])
const getSignUp = async () => {
  const res = await SignUpList()
  signList.value = res.data
}
const enrollList = ref<Option[]>([])
const getEnrollList = async () => {
  const res = await enrollStudents()
  enrollList.value = res.data
}
const cardsList = ref<Option[]>([])
const getCardsTypeList = async () => {
  const res = await cardsType()
  cardsList.value = res.data
}
const classList = ref<Option[]>([])
const getClassTypeList = async () => {
  const res = await classType()
  classList.value = res.data
}
const userList = ref<Option[]>([])
const getUserList = async () => {
  const res = await userGroup()
  userList.value = res.data
}
const labelList = ref<Option[]>([])
const getLabelList = async () => {
  const res = await labelGroup()
  labelList.value = res.data
}
const coachList = ref<Option[]>([])
const getCoachData = async () => {
  const res = await coachData()
  coachList.value = res.data
}
//身份证正面
const cardFrontImg = ref('')
const handleAvatarSuccess = (file: any) => {
  cardFrontImg.value = file.data.url
  form.value.cardFrontImg = file.data.url
}
// 身份证反面
const cardBackImg = ref('')
const handleCardBackImgSuccess = (file: any) => {
  cardBackImg.value = file.data.url
  form.value.cardBackImg = file.data.url
}
//上传限制大小格式等
const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 10240 / 10240 < 2
  if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
    ElMessage.error('图片类型仅支持JPG/PNG/GIF格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 20MB!!')
    return false
  }
}
onMounted(() => {
  getDate()
  getUserInfo()
  getEnrollList()
  getSignUp()
  getCardsTypeList()
  getClassTypeList()
  getUserList()
  getLabelList()
  getCoachData()
})
</script>

<style lang="scss">
.user {
  .icon {
    width: 1.4em;
    height: 1.4em;
    overflow: hidden;
    vertical-align: -0.15em;
    fill: currentcolor;
  }
}
</style>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  $box-radius: calc(var(--custom-radius) + 4px);

  .box-style {
    border: 1px solid var(--art-border-color);
  }

  .content {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    .left-wrap {
      width: 450px;
      margin-right: 25px;

      .user-wrap {
        position: relative;
        // height: 600px;
        padding: 35px 40px;
        overflow: hidden;
        text-align: center;
        background: var(--art-main-bg-color);
        border-radius: $box-radius;

        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 200px;
          object-fit: cover;
        }

        .avatarPic {
          position: relative;
          z-index: 10;
          width: 80px;
          height: 80px;
          margin-top: 120px;
          object-fit: cover;
          border: 2px solid #fff;
          border-radius: 50%;
        }

        .name {
          margin-top: 20px;
          font-size: 22px;
          font-weight: 400;
        }

        .des {
          margin-top: 20px;
          font-size: 14px;
        }

        .outer-info {
          width: 360px;
          margin: 30px 0 0;
          text-align: left;

          >div {
            margin-top: 10px;

            span {
              margin-left: 8px;
              font-size: 14px;
            }
          }
        }

        .lables {
          margin-top: 20px;
          display: flex;
          align-items: center;

          span {
            font-size: 14px;
          }

          h3 {
            font-size: 15px;
            font-weight: 500;
          }

          >div {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            // margin-top: 15px;
            margin-left: 20px;

            >div {
              padding: 3px 6px;
              // margin: 0 10px 10px 0;
              margin: 0 10px 0px 0;
              font-size: 12px;
              background: var(--art-main-bg-color);
              border: 1px solid var(--art-border-color);
              border-radius: 2px;
            }
          }
        }
      }

      .gallery {
        margin-top: 25px;
        border-radius: 10px;

        .item {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .right-wrap {
      flex: 1;
      overflow: hidden;
      border-radius: $box-radius;

      .info {
        background: var(--art-main-bg-color);
        border-radius: $box-radius;

        .title {
          padding: 15px 25px;
          font-size: 20px;
          font-weight: bold;
          color: var(--art-text-gray-800);
          border-bottom: 1px solid var(--art-border-color);
        }

        .tips {
          padding: 15px 0;
          font-size: 20px;
          font-weight: bold;
        }

        .form {
          box-sizing: border-box;
          padding: 30px 25px;

          >.el-row {
            flex-wrap: nowrap !important;

            .el-form-item {
              width: calc(50% - 10px);
            }

            .el-input,
            .el-select {
              width: 100%;
            }
          }

          .right-input {
            margin-left: 20px;
          }

          .el-form-item-right {
            display: flex;
            align-items: center;
            justify-content: end;

            .el-button {
              width: 110px !important;
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: $device-ipad-vertical) {
  .page-content {
    .content {
      display: block;
      margin-top: 5px;

      .left-wrap {
        width: 100%;
      }

      .right-wrap {
        width: 100%;
        margin-top: 15px;
      }
    }
  }
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 12px;
  }

  .del-image {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #8c939d;
  }

  &:hover .mask {
    opacity: 1;
  }

  &:hover .del-image {
    display: block;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.vipInfo {
  margin-top: 20px;
}

/* 强制覆盖开关颜色 */
:deep(.custom-switch .el-switch__core) {
  background-color: #dcdfe6 !important;
  border-color: #dcdfe6 !important;
}

:deep(.custom-switch.is-checked .el-switch__core) {
  background-color: #ff4949 !important;
  border-color: #ff4949 !important;
}

.font12 {
  font-size: 14px;
}
</style>
